.lesson-replay {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;

  .lesson-replay-loading,
  .lesson-replay-error {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 400px;
    gap: 16px;
  }

  .video-card {
    .video-player {
      .video-container {
        position: relative;
        background: #000;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 16px;

        video {
          display: block;
          width: 100%;
          height: auto;
        }
      }

      .video-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px;
        background: #fafafa;
        border-radius: 4px;

        .control-left {
          display: flex;
          align-items: center;
          gap: 12px;

          .time-display {
            font-size: 12px;
            color: #666;
            font-family: monospace;
          }
        }

        .control-center {
          flex: 1;
          margin: 0 16px;
        }

        .control-right {
          display: flex;
          align-items: center;
        }
      }
    }

    .lesson-info {
      margin-bottom: 24px;

      .lesson-meta {
        margin-top: 12px;
      }
    }

    .chapters-section {
      .chapter-item {
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background-color 0.2s;

        &:hover {
          background-color: #f0f0f0;
        }
      }
    }
  }

  .view-record-card {
    margin-bottom: 16px;

    .record-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .video-settings-card {
    margin-bottom: 16px;

    .setting-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .attachments-card {
    .ant-list-item {
      padding: 8px 0;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .lesson-replay {
    padding: 16px;

    .video-card {
      .video-player {
        .video-controls {
          flex-direction: column;
          gap: 12px;

          .control-center {
            margin: 0;
            width: 100%;
          }
        }
      }

      .chapters-section {
        .chapter-item {
          padding: 12px;
        }
      }
    }

    .view-record-card,
    .video-settings-card,
    .attachments-card {
      margin-bottom: 12px;

      .record-item,
      .setting-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }
    }
  }
} 